<template>
  <view class="container">
    <cu-custom bg-color="bg-gradual-blue-dark">
      <block slot="left">
        <view class="action">
          <view class="cu-load load-cuIcon" :class="!isLoad ? 'loading' : 'over'"></view>
        </view>
      </block>
      <block slot="content">首页</block>
      <block slot="right">
        <view class="action">
          <view class="cu-load load-cuIcon" :class="!isLoad ? 'loading' : 'over'"></view>
        </view>
      </block>
    </cu-custom>
    <swiper
      class="screen-swiper"
      :class="dotStyle ? 'square-dot' : 'round-dot'"
      :indicator-dots="true"
      :circular="true"
      :autoplay="true"
      interval="5000"
      duration="500"
    >
      <swiper-item v-for="(item, index) in swiperList" :key="index" class="screen-swiper-item">
        <image :src="item.url" mode="aspectFill" v-if="item.type == 'image'" />
      </swiper-item>
    </swiper>
    <view class="car-contain">
      <view class="car-head">
        <text class="car-head-title">热卖爆品，品质推荐</text>
        <text class="car-head-text">各类豪车抢购倒计时</text>
      </view>
      <view class="car-list-wrap">
        <view v-for="(item, index) in carList" :key="index" class="car-list baseColor2Bg">
          <view class="item-list-title-wrap">
            <view class="item-list-title">
              <text>{{item.name1}}</text>
              <text>{{item.value1}}</text>
            </view>
            <view class="item-list-title">
              <text>{{item.name2}}</text>
              <text>{{item.value2}}</text>
            </view>
            <view class="item-list-title">
              <text>{{item.name3}}</text>
              <text>{{item.value3}}</text>
            </view>
            <view class="item-list-title">
              <text>{{item.name4}}</text>
              <text>{{item.value4}}</text>
            </view>
          </view>
          <view class="item-list-bottom">
            <image :src="item.url" class="car-img" />
            <view class="item-list-btn-wrap">
              <text class="item-list-car-name">{{item.carName}}</text>
              <view class="item-list-btn baseColor1Bg">
                <text class="item-list-btn-text">{{item.btnValue}}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      href: "https://uniapp.dcloud.io/collocation/pages?id=easycom",
      isLoad: true,
      swiperList: [
        {
          id: 0,
          type: "image",
          url: "../../static/images/banner01.jpg"
        },
        {
          id: 1,
          type: "image",
          url: "../../static/images/banner02.jpg"
        },
        {
          id: 2,
          type: "image",
          url: "../../static/images/banner03.jpg"
        }
      ],
      carList: [
        {
          name1: "领养倒计时：",
          value1: "我的是打算大所大所大所大所多大声道",
          name2: "领养倒计时：",
          value2: "24h",
          name3: "领养倒计时：",
          value3: "24h",
          name4: "领养倒计时：",
          value4: "24h",
          url: "../../static/images/bugatti.png",
          carName: "宝马一号",
          btnValue: "收藏中"
        },
        {
          name1: "领养倒计时：",
          value1: "24h",
          name2: "领养倒计时：",
          value2: "24h",
          name3: "领养倒计时：",
          value3: "24h",
          name4: "领养倒计时：",
          value4: "24h",
          url: "../../static/images/bugatti.png",
          carName: "宝马一号",
          btnValue: "收藏中"
        },
        {
          name1: "领养倒计时：",
          value1: "24h",
          name2: "领养倒计时：",
          value2: "24h",
          name3: "领养倒计时：",
          value3: "24h",
          name4: "领养倒计时：",
          value4: "24h",
          url: "../../static/images/bugatti.png",
          carName: "宝马一号",
          btnValue: "收藏中"
        },
        {
          name1: "领养倒计时：",
          value1: "24h",
          name2: "领养倒计时：",
          value2: "24h",
          name3: "领养倒计时：",
          value3: "24h",
          name4: "领养倒计时：",
          value4: "24h",
          url: "../../static/images/bugatti.png",
          carName: "宝马一号",
          btnValue: "收藏中"
        }
      ],
      dotStyle: false,
      towerStart: 0,
      direction: ""
    };
  },
  methods: {
    navigateTo: function(item) {
      uni[item.isTabbar ? "switchTab" : "navigateTo"]({
        url: item.navigateUrl
      });
    },
    navigateToMenu: function(item) {
      uni[item.isTabbar ? "switchTab" : "navigateTo"]({
        url: item.navigateUrl
      });
    }
  }
};
</script>

<style lang="scss">
page {
  background: #406fa0;
  padding-bottom: 100rpx;
}

.intro {
  font-size: 14px;
  line-height: 24px;
}

.car-contain {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex: 1;
}
.car-head {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
}
.car-head-title {
  font-size: 40rpx;
  color: #fff;
}
.car-head-text {
  font-size: 30rpx;
  color: #fff;
}
.car-list-wrap {
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 20rpx;
}
.car-list {
  // justify-content: space-between;
  // align-items: space-between;
  width: 48%;
  padding: 20rpx;
  margin-bottom: 20rpx;
  min-height: 400rpx;
  border-radius: 10rpx;
  // margin: 20rpx;
}
.item-list-title {
  font-size: 20rpx;
  margin-bottom: 20rpx;
}
.item-list-bottom {
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: center;
}
.car-img {
  width: 150rpx;
  height: 100rpx;
}
.item-list-btn-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.item-list-btn {
  padding: 6rpx 16rpx;
  margin-top: 10rpx;
  border-radius: 10rpx;
  font-size: 14rpx;
}
.item-list-title-wrap {
  min-height: 250rpx;
  margin-top: 20rpx;
}
</style>
